<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/pc/jsp/common/common.jsp"%>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <title>更换头像</title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/self.js"></script>
    <script src="js/ajaxfileupload.js"></script>
</head>
<body style="background: transparent">
<div class="theme-popover-mask"></div>
<div id="photoclip" class="photoclip pa of bcf" style="display: block">
    <div class="detailTop w100 of">
        <div class="w100 of tc c3 f18 pr" style="line-height: 68px;border-bottom: 1px solid #E7E7E7">
            更换头像<span class="pa cursor photoclose c6" id="close-x">&times;</span>
        </div>
    </div>
    <div class="w100 of">
        <div class="w100 of jz">
            <section id="touxiangClip" class="touxiangClip w100 bcf of">
                <div id="clipArea" class="jz"></div>
                <div class="w100 of clearfix" style="width: 80%;margin: 20px auto;">
                    <button type="button" id="fileFake" class="choosePic fl" onclick="choosePic();">选择图片</button>
                    <input type="file" id="file">
                    <input type="hidden" id="newAvater" name="newAvater">
                    <button type="button" id="clipBtn" class="choosePic fr" style="background:#ccccff;">截取提交</button>
                </div>
                <div id="view"></div>
                <P class="w100 tc c6 f12 mgt10">截图预览</P>
                <div class="w100 of mgb32 mgt10">
                    <button type="button" id="clipOk" class="cf jz db btnBlue" onclick="clipOkBnt();">确定</button>
                </div>
            </section>
            <script src="js/iscroll-zoom.js"></script>
            <script src="js/hammer.js"></script>
            <script src="js/lrz.all.bundle.js"></script>
            <script src="js/jquery.photoClip.js"></script>
            <script>
                function choosePic() {
                    $("#file").trigger("click");
                }


                //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
                var clipArea = new bjj.PhotoClip("#clipArea", {
                    size: [150, 150],
                    outputSize: [150, 150],
                    file: "#file",
                    view: "#view",
                    ok: "#clipBtn",
                    loadStart: function() {
                        console.log("照片读取中");
                    },
                    loadComplete: function() {
                        console.log("照片读取完成");
                    },
                    clipFinish: function(dataURL) {
                         convertToFile(dataURL);
                        //clipArea.destroy(); 
                    }
                });
                  


   
                
                
function convertToFile(base64Codes){//将base64转化blob，并放到form中  
  
    var formData = new FormData();  
 
    //formData.append('file', convertBase64UrlToBlob(base64Codes));
    
    formData.append("testimg",convertBase64UrlToBlob(base64Codes));//img是input的name属性，与后台的对应即可  
    formData.append("file",convertBase64UrlToBlob(base64Codes));
    console.log(formData);
    
    $.ajax({//提交表单，异步上传图片  
        url : "uploadImageBlob",  
        type : "POST",  
        data: formData,
        secureuri:false,  
        //dataType:"json", 
        processData : false,         // 告诉jQuery不要去处理发送的数据  
        contentType : false,        // 告诉jQuery不要去设置Content-Type请求头  
        success:function(data){
        	$("#newAvater").val(data);
            console.log(data);
        },
        error: function (data) {
            layer.alert("出错了");
            return false;
        }  
    });  
}  

function convertBase64UrlToBlob(urlData){  
    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  
    //处理异常,将ascii码小于0的转换为大于0  
    var ab = new ArrayBuffer(bytes.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < bytes.length; i++) {  
        ia[i] = bytes.charCodeAt(i);  
    }  
    return new Blob( [ab] , {type : 'image/png'});  
}  

function clipOkBnt()
{

       var newAvater = $.trim($('#newAvater').val());
       if(newAvater== ""){
            layer.alert("没有选择图片");
            return false;
       }
       $.ajax({//提交表单，异步上传图片  
            url: "PlugServlet ",
            data: JSON.stringify({m:115,avatar :newAvater}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
	        success:function(data){
	        	console.log(data);
	           if(data['state']==1)
	           {
	           		layer.alert(data.info);
	           		clipArea.destroy();
	           		window.history.back(-1);
	           }
	           else
	           {
	           		layer.alert(data.info);
	           }
	            
	        },
	        error: function (data) {
	            layer.alert("出错了");
	            return false;
	        }
        });
       


}

            </script>
            <style>
                #clipArea {
                    height: 200px;
                    margin-top: 20px;
                    width: 90%;
                }
                #file{
                    display: none;
                }
                #view {
                    margin: 0 auto;
                    width: 110px;
                    height: 110px;
                    border: 4px dashed #E7E7E7;
                }
                #clipOk{
                    width: 96%;
                    display: block;
                    height: 40px;
                    line-height:40px;
                }
            </style>
        </div>
    </div>
</div>
<script>
    $(window).on("load", function() {
        $("#changePicBtn", parent.document).click(function () {
            $("#changePicDiv", parent.document).slideDown();
            $(".theme-popover-mask", parent.document).fadeIn();

        })
        $("#close-x").click(function () {
            $("#changePicDiv", parent.document).slideUp();
            $(".theme-popover-mask", parent.document).fadeOut();

        })

    })

</script>
</body>
</html>